<%--
  Created by IntelliJ IDEA.
  User: 95126
  Date: 2021/4/29
  Time: 8:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="../imgs/css/bootstrap.min.css">
    <link rel="stylesheet" href="../imgs/css/all.min.css">
    <link rel="stylesheet" href="../imgs/css/animate.css">
    <link rel="stylesheet" href="../imgs/css/flaticon.css">
    <link rel="stylesheet" href="../imgs/css/magnific-popup.css">
    <link rel="stylesheet" href="../imgs/css/odometer.css">
    <link rel="stylesheet" href="../imgs/css/owl.carousel.min.css">
    <link rel="stylesheet" href="../imgs/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="../imgs/css/nice-select.css">
    <link rel="stylesheet" href="../imgs/css/main.css">


    <link rel="shortcut icon" href="../imgs/images/favicon.png" type="image/x-icon">

    <title>Boleto  - Online Ticket Booking Website HTML Template</title>


</head>
<style>
    .disabled {
        background-image: -webkit-linear-gradient(169deg, #5560ff 17%, #aa52a1 63%, #ff4343 100%);
        padding: 11px 24px;
        font-weight: 600;
        color: #ffffff;
        text-transform: uppercase;
        border-radius: 25px;
        display: inline-block;
    }
    .disabled:hover {
        background-image: -webkit-linear-gradient(169deg, #5560ff 17%, #aa52a1 63%, #ff4343 100%);
        padding: 11px 24px;
        font-weight: 600;
        color: #ffffff;
        text-transform: uppercase;
        border-radius: 25px;
        display: inline-block;
    }
</style>

<body>
<!-- ==========Preloader========== -->
<div class="preloader">
    <div class="preloader-inner">
        <div class="preloader-icon">
            <span></span>
            <span></span>
        </div>
    </div>
</div>
<!-- ==========Preloader========== -->
<!-- ==========Overlay========== -->
<div class="overlay"></div>
<a href="#0" class="scrollToTop">
    <i class="fas fa-angle-up"></i>
</a>
<!-- ==========Overlay========== -->

<!-- ==========Header-Section========== -->
<%@include file="nav/nav.jsp"%>
<!-- ==========Header-Section========== -->

<!-- ==========Banner-Section========== -->
<section class="details-banner hero-area bg_img seat-plan-banner" data-background="../imgs/images/banner/banner04.jpg">
    <div class="container">
        <div class="details-banner-wrapper">
            <div class="details-banner-content style-two">
                <h3 class="title">${seat.movieName}</h3>
                <div class="tags">
                    <a href="#0">城市步行</a>
                    <a href="#0">英语-2D</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==========Banner-Section========== -->

<!-- ==========Page-Title========== -->
<section class="page-title bg-one">
    <div class="container">
        <div class="page-title-area">
            <div class="item md-order-1">
                <a href="movie-ticket-plan.html" class="custom-button back-button">
                    <i class="flaticon-double-right-arrows-angles"></i>返回
                </a>
            </div>
            <div class="item date-item">
                <span class="date">${seat.date}</span>
                <span class="custom-button back-button">${seat.session}</span>
            </div>
            <p class="time-left">
                请在<button class="minute custom-button back-button " style="width: 120px" ></button>分钟<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="second custom-button back-button" style="width: 120px"></button>秒内完成支付
            </p>
        </div>
    </div>
</section>
<!-- ==========Page-Title========== -->

<!-- ==========Movie-Section========== -->
<div class="movie-facility padding-bottom padding-top">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="checkout-widget d-flex flex-wrap align-items-center justify-cotent-between">
                    <div class="title-area">
                        <h5 class="title">已经是会员了？</h5>
                        <p>
                            登录以赢取积分并简化预订！</p>
                    </div>
                    <a href="#0" class="sign-in-area">
                        <i class="fas fa-user"></i><span>登录</span>
                    </a>
                </div>

                <div class="checkout-widget checkout-card mb-0">
                    <h5 class="title">付款选择权 </h5>
                    <ul class="payment-option">
                        <li>
                            <a href="#0">
                                <img src="../imgs/images/payment/paypal.png" alt="payment">
                                <span>支付宝</span>
                            </a>
                        </li>
                    </ul>
                    <form class="payment-card-form">
                        <div class="form-group check-group">
                            <input id="card5" type="checkbox" checked>
                            <label for="card5">
                                <span class="title">快速支付</span>
                                <span class="info"></span>
                            </label>
                        </div>
                        <div class="form-group">
                            <input id="pay-button" type="button" class="custom-button" value="支付">
                        </div>
                    </form>
                    <p class="notice">
                        点击“付款”即表示您同意 <a href="#0">条款和条件</a>
                    </p>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="booking-summery bg-one">
                    <h4 class="title">预订总结</h4>
                    <ul>
                        <li>
                            <h6 class="subtitle">${seat.movieName}</h6>
                            <span class="info">英语-2d</span>
                        </li>
                        <li>
                            <h6 class="subtitle"><span>城市步行</span><span>02</span></h6>
                            <div class="info"><span>${seat.date}</span> <span>门票</span></div>
                        </li>
                        <li>
                            <h6 class="subtitle"><span>座位</span></h6>
                            <div class="info"><span>${seat.seatArea}</span></div>
                        </li>
                        <li>
                            <h6 class="subtitle mb-0"><span>单价</span><span>￥${seat.price}</span></h6>
                        </li>
                    </ul>
                    <ul class="side-shape">
                        <li>
                            <h6 class="subtitle"><span>会员价</span><span>￥${seat.total}</span></h6>
                        </li>
                    </ul>
                </div>
                <div class="proceed-area  text-center">
                    <h6 class="subtitle"><span>应付金额</span><span>￥${seat.total}</span></h6>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ==========Movie-Section========== -->

<!-- ==========Newslater-Section========== -->
<%@include file="footer/footer.jsp"%>
<!-- ==========Newslater-Section========== -->


<script src="../imgs/js/jquery-3.3.1.min.js"></script>
<script src="../imgs/js/modernizr-3.6.0.min.js"></script>
<script src="../imgs/js/plugins.js"></script>
<script src="../imgs/js/bootstrap.min.js"></script>
<script src="../imgs/js/isotope.pkgd.min.js"></script>
<script src="../imgs/js/magnific-popup.min.js"></script>
<script src="../imgs/js/owl.carousel.min.js"></script>
<script src="../imgs/js/wow.min.js"></script>
<script src="../imgs/js/countdown.min.js"></script>
<script src="../imgs/js/odometer.min.js"></script>
<script src="../imgs/js/viewport.jquery.js"></script>
<script src="../imgs/js/nice-select.js"></script>
<script src="../imgs/js/main.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
    window.onload = function(){
        timeDown(); //计时器
    }
    $(function () {
        LockButton('#time', 900);
        //读取cookie
        if ($.cookie("djsendtime") != undefined && !isNaN($.cookie("djsendtime"))) {  //读取到了cookie值
            var djsendtime = $.cookie("djsendtime");
            var now = new Date().getTime();  //当前时间戳
            var locksecends = parseInt((djsendtime - now) / 1000);
            if (locksecends <= 0) {
                $.cookie("djsendtime", null);
            } else {
                LockButton('#time', locksecends);
            }
        }

    })
    // 按钮倒计时
    function LockButton(btnObjId, locksecends) {
        //1.获取当前系统时间
        //2.获取 locksecends 后的系统时间
        //3.用cookie保存到期时间
        //4.每次加载后获取cookie中保存的时间
        //5.用到期时间减去当前时间获取倒计时
        var djsendtime = $.cookie("djsendtime");
        if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {
            var now = new Date().getTime();  //当前时间戳
            var endtime = locksecends * 1000 + now;  //结束时间戳
            $.cookie("djsendtime", endtime);  //将结束时间保存到cookie
        }
        $(btnObjId).addClass('disabled').attr('disabled', 'disabled').text( locksecends + '秒');
        $('body').off('click', '#btnSendSMS');
        var timer = setInterval(function () {
            locksecends--;
            $(btnObjId).text( locksecends + '秒');
            if (locksecends <= 0) {
                //倒计时结束清除cookie值
                $.cookie("djsendtime", null);
                $(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取');
                $('body').on('click', btnObjId);
                clearInterval(timer);
            }
        }, 1000);
    }

    // $("#pay-button").click(function(){
    //     window.location="/boot/order/payorder?ordersn="+123;
    // })
    $("#pay-button").click(function(){
        var movieName="${seat.movieName}";
        var seatArea="${seat.seatArea}";
        var total=${seat.total};
        var session="${seat.session}";
        var date="${seat.date}";
        var price=${seat.price};
        let formValue={"movieName":movieName,"seatArea":seatArea,"price":price,"total":total,"session":session,"date":date}
        $.get('/boot/order/seatsinfo',formValue,function(data){
            window.location="/boot/order/createorder";
        })

    })

    //计时器
    function timeDown(){
        var timeMinute = $(".minute");
        var timeSecond = $(".second");
        var minute;
        var second;
        timeMinute.text(localStorage.minute);
        timeSecond.text(localStorage.second);
        setInterval(function(){
            if(second==0 && minute==0){
                window.alert("支付时间已过，订单失效！");
                localStorage.clear();
            }
            if((localStorage.second == "NaN") || (localStorage.second == 0 && localStorage.minute == 0))
            {
                localStorage.minute = 14;
                localStorage.second = 59;
            }
            second = localStorage.second;
            minute = localStorage.minute;
            if(second==0){
                minute--;
                second = 60;
            }
            second--;
            timeMinute.text(minute);
            timeSecond.text(second);
            localStorage.second = second;
            localStorage.minute = minute;
        },1000);
    }

</script>
</body>

</html>
